<script setup lang="ts">
  import { ref } from "vue";
  import { Filter } from "@/components/SideBar";
  import Dialog from "@/components/sql/Dialog.vue";

  const states = ["已受理", "转账中", "已完成", "已关闭", "其他"],
    fd: RequiredKey<gt.components.SideBar.Filter, "opt">[] = [
      { value: "新增", type: "button", opt: { onClick() { click(0); }, type: "primary", class: "mac-ico-add-round", disabled: true } },
      {
        type: "treeSelect", label: "筛选类型", value: "", opt: {
          data: ["订单分销", "中奖兑付", "其他转账"].map(e => { return { label: e, value: e }; }), clearable: true, placeholder: "选择类型筛选条件",
          onChange: fetch
        },
      },
      {
        type: "treeSelect", label: "筛选状态", value: "", opt: {
          data: states.map(e => { return { label: e, value: e }; }), clearable: true, placeholder: "选择状态筛选条件",
          onChange: fetch
        },
      },
    ],
    page = ref<gt.PageData<gt.sql.transfer>>({ current: 1, size: 10, total: 0, data: [] }),
    filterData = ref<any>(fd),
    tip = ref([
      { label: `查看`, value: 2, cls: "mac-ico-search", per: true },
      { label: `删除`, value: 3, cls: "mac-ico-delete", per: true },
    ] as const),
    dig = ref<InstanceType<typeof Dialog>>(),
    refresh = ref(0)
    ;


  async function click(method: gt.curd, p?: gt.sql.transfer) {
    if (dig.value) {
      if (!p) { p = format.def.transfer; }
      dig.value.open("transfer", method, p, "转账");
    }
  }
  async function init() {
    while (!api.mid) {
      await next();
    }
    fd[0].opt.disabled = !api.me.per("转账创建");

    refresh.value ^= 1;
    page.value.current = 1;
    fetch();
    // while (!dig.value) { await next(); } click(0); // 测试点击
  }
  init();
  async function fetch() {
    const qr: R<gt.sql.transfer>[] = [];
    if (fd[1].value) {
      qr.push({ field: "type", logic: "=", value: fd[1].value });
    }
    if (fd[2].value) {
      if (fd[2].value == states[4]) {
        qr.push({ field: "state", logic: "notIn", value: states.slice(0, 4) });
      } else {
        qr.push({ field: "state", logic: "=", value: fd[2].value });
      }
    }
    const res = await gd.transfer.read({
      "#page": { current: page.value.current, size: page.value.size },
      "#rule": qr,
      "#order": [["createTime", "DESC"]]
    });
    page.value = res;
  }
  function formatMoney(...p: any[]) {
    return Number(p[2] / 100).toFixed(2);
  }
  async function refreshTransfer(id: string) {
    gd.transfer.push(await format.transfer(await api.request({ id }, "transferRefresh")));
    refresh.value ^= 1;
  }
</script>
<template>
  <LayoutPage>
    <div class="index whf oh y" :key="refresh">
      <Filter :data="filterData" isRow class="mb1em" />
      <el-table stripe highlight-current-row :data="page.data" class="wf fg1" type="expand" row-key="id">
        <el-table-column prop="id" label="id" width="100" show-overflow-tooltip />
        <el-table-column prop="_createTime" label="创建时间" width="120" show-overflow-tooltip />
        <el-table-column prop="type" label="类型" show-overflow-tooltip width="100" />
        <el-table-column prop="state" label="状态" show-overflow-tooltip width="100" />
        <el-table-column prop="money" label="金额" :formatter="formatMoney" show-overflow-tooltip width="100" />
        <el-table-column prop="name" label="名称" show-overflow-tooltip />
        <el-table-column prop="des" label="备注" show-overflow-tooltip />
        <el-table-column prop="_create.name" label="目标用户" width="120" show-overflow-tooltip />
        <el-table-column prop="_cuid.name" label="发起人员" width="120" show-overflow-tooltip />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <div class="buttons x za">
              <el-tooltip v-if="row.refresh" content="刷新状态">
                <div class="mac-ico-jiantou_zuoyouqiehuan" @click.stop="refreshTransfer(row.id)" />
              </el-tooltip>

              <template v-for="a in tip">
                <el-tooltip v-if="a.per" :content="a.label">
                  <div :class="a.cls" @click.stop="click(a.value, row)" />
                </el-tooltip>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, jumper, ->, sizes, total"
        :page-sizes="[10, 20, 30, 40, 50, 100]" v-model:page-size="page.size" :total="page.total"
        v-model:currentPage="page.current" @size-change="fetch" @current-change="fetch" />
      <Dialog ref="dig" />
    </div>
  </LayoutPage>
</template>
<style lang="scss" scoped>
  .index {
    position: relative;
    .buttons {
      >div {
        cursor: pointer;
        padding: 0 0.4em;
        font-weight: 600;
        &:hover {
          border: 1px solid #a5a5a5;
          box-sizing: border-box;
          border-radius: 0.5em;
          box-shadow: 0 0 10px #000;
        }
      }
      >.mac-ico-add-round, >.mac-ico-people-list {
        color: var(--color-success);
      }
      >.mac-ico-edit, >.mac-ico-warning {
        color: var(--color-warning);
      }
      >.mac-ico-search {
        color: var(--color-primary);
      }
      >.mac-ico-delete, >.mac-ico-my {
        color: var(--color-error);
      }
    }
    .el-table {

      .blueRow {
        color: blue;
      }
      .redRow {
        color: red;
      }
    }
  }
</style>